<template>
  <div class="NewsDetail">
    <div class="top">
      <div class="title">{{newsDetail.title}}</div>
    </div>
    <div class="content">
      <div class="left">
        <div class="main" v-html="newsDetail.content">

        </div>
        <div class="footer">
          <div class="item">
            <p>
              类别:
              <span>行业动态</span>
            </p>
            <p>
              标签:
              <span>无</span>
            </p>
          </div>
        </div>
      </div>
      <div class="right">
        <RecentNews />
      </div>
    </div>
  </div>
</template>

<script>
import RecentNews from './components/RecentNews.vue';
export default {
  name: "NewsDetail",
  components:{
    RecentNews
  },
  data() {
    return {
      newsDetail:{}
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      let newsDetail = sessionStorage.getItem("newsDetail");
      if(!newsDetail) {
        this.$router.push("/news");
        return;
      }
      newsDetail = JSON.parse(newsDetail);
      this.newsDetail = newsDetail;
    }
  }
};
</script>

<style lang="scss" scoped>
.NewsDetail {

  .top {
    height: 200px;
    background: $primaryColor;
    text-align: center;
    .title {
      padding-top: 100px;
      margin-bottom: 16px;
      font-family: Open Sans;
      font-weight: 300;
      font-size: 3.375em;
      line-height: 1.26;
      color: rgb(255, 255, 255);
    }
  }
  .content {
    width: 65vw;
    margin: 40px auto;
    display: flex;
    padding-bottom: 40px;
    // background: pink;
    .left {
      width: 70%;
      background: #fff;
      box-shadow: 0px 10px 40px 0px rgba(1, 51, 74, 0.15);
      padding: 30px;
      box-sizing: border-box;
      // min-height: 100vh;
      border-radius: 5px;
      .main{
        overflow: hidden;
      }
      .footer {
        border-top: 1px solid #bababa;
        margin-top: 40px;
        padding-top: 20px;
        p {
          font-size: 14px;
          span {
            color: #a8a8a8;
            cursor: pointer;
          }
        }
      }
    }
    .right {
      flex: 1;
      margin-left: 20px;
      .article {
        margin-bottom: 30px;
        .t1 {
          font-weight: bold;
          margin: 20px 0;
        }
        .list {
          list-style: none;
          li {
            color: #666666;
            font-size: 14px;
            margin: 15px 0;
            cursor: pointer;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {

      .top{
        padding: 0 10px;
        .title{
          font-size: 30px;
        }
      }
      .content{
        width: 90vw;
        flex-direction: column;
        .left{
          width: 100%;
        }
      }

    }
}
</style>
